<template>
	<a-space class="step-wrap">
		<left-outlined :style="{ ...iconStyle, ...(prevDisabled ? disabledStyle : allowStyle) }" @click="onPrev" />
		<right-outlined :style="{ ...iconStyle, ...(nextDisabled ? disabledStyle : allowStyle) }" @click="onNext" />
	</a-space>
</template>

<script setup>
	const props = defineProps({
		prevDisabled: {
			type: Boolean,
			default: true
		},
		nextDisabled: {
			type: Boolean,
			default: true
		}
	})
	const emits = defineEmits(['prev', 'next'])

	const iconStyle = ref({
		fontSize: '24px'
	})
	const allowStyle = ref({
		color: '#1890ff',
		cursor: 'pointer'
	})
	const disabledStyle = ref({
		color: '#ccc',
		cursor: 'not-allowed'
	})

	const onPrev = () => {
		!props.prevDisabled && emits('prev')
	}
	const onNext = () => {
		!props.nextDisabled && emits('next')
	}
</script>

<style lang="less" scoped>
	.step-wrap {
		position: fixed;
		top: 70px;
		right: 120px;
	}
</style>
